
@verbatim
    <script type="text/html" id="IDTpl2">
        <a href="/admin/contact/{{d.contact_id}}/setting"><span style="color: #F581B1;">{{ d.contact_id }}</span></a>
    </script>
@endverbatim
{{--表格--}}
<script>
    //自身客户
    layui.use('table', function(){
        var table = layui.table ,form = layui.form;
        //第一个表格实例
        table.render({
            elem: '#demo2'
            ,height: 315
            ,url:"/admin/customer/{{\Auth::guard("admin")->user()->id}}/data" //数据接口
            ,page: true //开启分页
            ,id:'idTest2'
            ,cellMinWidth: 100
            ,cols: [[ //表头
                {type:'checkbox'}
                ,{field:'id',title: 'ID',width:60, sort: true}
                ,{field:'customer_level',edit: 'text',width:100, title: '客户等级'}
                ,{field:'customer_type',edit: 'text',width:100, title: '客户状态'}
                ,{field:'contact_cycle',edit: 'text', width:100,title: '联系周期'}
                ,{field:'contact_id', title: '联系人',width:80,edit: 'text',templet: '#IDTpl2'}
                ,{field:'user_id', title: '处理人',width:150,templet: '#IDTpl'}
                ,{field:'time_left', title: '剩余时间',width:150,edit: 'text'}
                ,{fixed: 'right', title:'操作',edit: 'text',align:'center', toolbar: '#barDemo3'} //这里的toolbar值是模板元素的选择器
            ]]
        });

        //分页操作
        var $ = layui.$, active = {
            reload: function(){
                var key =document.getElementById('xzk2').value;
               var value=$('#demoReload2');
                //执行重载
                table.reload('idTest2', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        key: {
                            key: key.toString(),
                            value:value.val()
                        }
                    }
                });
                //复选框操作
               // var aa=$('#xzk');
                //console.log(aa[0][2]);
            },isAll2: function(){ //验证是否全选
                var checkStatus = table.checkStatus('idTest2');
                layer.msg(checkStatus.isAll ? '全选': '未全选')
            }
            ,getCheckLength2: function(){ //客户重分配
                var checkStatus = table.checkStatus('idTest2')
                    ,data = (checkStatus.data);
                if(data=="")
                {
                    layer.msg("你没选中");
                    return;
                }
                var arr=[];
                for(var i=0;i<data.length;i++)
                {
                    arr.push(data[i]['id']);
                }
                layer.open({
                    type: 2  //1普通公告 2
                    , title: ["大家好", 'font-size:18px;text-align:center'] //False不显示标题栏
                    , area: ['900px', '450px']
                    , shade: 0.8
                    , maxmin: true
                    , id: 'LAY_layuipro' //设定一个id，防止重复弹出
                    , btnAlign: 'c'
                    , zIndex: layer.zIndex //重点1
                    , moveType: 0 //拖拽模式，0或者1
                    , content: '/admin/customer/translation' //调用的函数fliters
                    , success: function (layero, index) {
                        var body = layer.getChildFrame('body', index);//建立父子联系
                        var iframeWin = window[layero.find('iframe')[0]['name']];
                        // console.log(arr); //得到iframe页的body内容
                        // console.log(body.find('input'));
                        var inputList = body.find('input');
                        //for(var j = 0; j< inputList.length; j++){
                        //alert(arr[j]);
                        //body.find('#cnm').prepend(document.createTextNode("你好"));
                        //$(inputList[j]).attr('title',arr[j]); 修改标签属性值
                        console.log(arr);
                        for (var j = 0; j < arr.length; j++) {
                            $('<input type="checkbox" name="lists[]" value="' + arr[j] + '" title="' + arr[j] + '" checked="">').prependTo(body.find('#sb'))
                        }
                    }
                });

            }
            ,getCheckData2: function(){ //删除选中数据
                var checkStatus = table.checkStatus('idTest2')
                    ,data = (checkStatus.data);
                if(data=="")
                {
                    layer.msg("你没选中");
                }
                console.log(JSON.stringify(data[0]['id']));
                var arr=[];
                for(var i=0;i<data.length;i++)
                {
                    arr.push(data[i]['id']);
                }
                var data1=Object.assign({},arr)
                $.ajax({
                    //几个参数需要注意一下
                    type: "get",//方法类型
                    dataType: "json",//预期服务器返回的数据类型
                    url: "/admin/user/del" ,//url
                    data:data1 ,
                    success: function (result) {
                        console.log(result);
                        layer.msg('删除成功');
                        $(".layui-laypage-btn").click();
                        //window.location.reload();  //页面刷新
                    },
                });
            }
        };
        //搜索
        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        //表动态操作
        table.on('tool(test2)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            var newArray = [];

            for(var name in data)
            {
                newArray.push(name);
            };
            //console.log(newArray);
            //var arr=['id','name','phone','email'];
            var fliters=(filter(newArray)+'</div>');
            function filter(str) {
                var field_array=field()[0]//获取字段对应的中文
                console.log(field_array);
                var a = '<div style="padding: 10px; line-height: 42px; background-color: #393D49; color: #fff; font-weight: 300;">';
                str.forEach(function(i,index){
                    if(data[i]!=null)
                    {
                        a+='<span class="layui-form-label" style="width:200px;text-align: left" >'+" "+field_array[i]+":"+data[i]+"</span><br>";
                    }
                })
                return a;
            }
            if(layEvent === 'detail'){ //查看
                //示范一个公告层
                layer.open({
                    type: 1
                    ,title: "大家好" //False不显示标题栏
                    ,closeBtn: false
                    ,area: '300px;'
                    ,shade: 0.8
                    ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                    ,btn: ['火速围观', '残忍拒绝']
                    ,btnAlign: 'c'
                    ,moveType: 1 //拖拽模式，0或者1
                    ,content:fliters //调用的函数
                    ,success: function(layero){
                        var btn = layero.find('.layui-layer-btn');
                        btn.find('.layui-layer-btn0').attr({
                            href: '/'
                            ,target: '_self'
                        });
                        //filter()
                    }
                });
            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                    window.location.href='/admin/user/'+data.id+'/delete'
                });
            } else if(layEvent === 'edit'){ //编辑
                $.ajax({
                    //几个参数需要注意一下
                    type: "POST",//方法类型
                    dataType: "json",//预期服务器返回的数据类型
                    url: "/admin/customer/"+data.id+"/update" ,//url
                    data:data ,
                    success: function (result) {
                        if(result['statu']==0){
                            layer.open({
                                type: 2  //1普通公告 2
                                ,title: ["大家好",'font-size:18px;text-align:center'] //False不显示标题栏
                                , area: ['730px', '560px']
                                ,shade: 0.8
                                ,maxmin: true
                                ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                                ,btnAlign: 'c'
                                ,zIndex: layer.zIndex //重点1
                                ,moveType: 0 //拖拽模式，0或者1
                                ,content: '/admin/customer/'+data.id+'/edit' //调用的函数fliters
                                ,success: function(layero,index){
                                    var body = layer.getChildFrame('body',index);//建立父子联系
                                    var iframeWin = window[layero.find('iframe')[0]['name']];
                                    var inputList = body.find('input');
                                    //for(var j = 0; j< inputList.length; j++){
                                    //alert(arr[j]);
                                    //body.find('#cnm').prepend(document.createTextNode("你好"));
                                    //$(inputList[j]).attr('title',arr[j]); 修改标签属性值
//                                    console.log(arr);
//                                    for(var j=0;j<arr.length;j++)
//                                    {
//                                        $('<input type="checkbox" name="lists[]" value="'+arr[j]+'" title="'+names[j]+'" checked="">').prependTo(body.find('#sb'))
//
//                                    }
                                }

                                //}
                            });
                        }
                        else{
                            layer.msg('修改成功');
                        }
                    },
                });
            }
        });
    });
</script>
<script type="text/html" id="barDemo3">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
{{--Tab--}}
<script>
    //tab操作
    layui.use('element', function() {
        var $ = layui.jquery
            , element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
        //触发事件
        //Hash地址的定位
        var layid = location.hash.replace(/^#demo=/, '');
        element.tabChange('demo', layid);

        element.on('tab(demo)', function(elem){
            location.hash = 'demo='+ $(this).attr('lay-id');
        });
    });

</script>